import { h } from 'vue'
import IconSelect from '@/components/IconSelect/index.vue'
import { ElInputNumber } from 'element-plus'

/**
 * 分类表单配置
 * @typedef {Object} FormConfig
 * @property {string} field - 字段名
 * @property {string} label - 标签文本
 * @property {string} component - 组件类型
 * @property {string} [placeholder] - 占位文本
 * @property {Object} [props] - 组件属性
 * @property {boolean} [editDisabled] - 编辑时是否禁用
 * @property {boolean} [hideInEdit] - 编辑时是否隐藏
 * @property {Array} [options] - 选项数据(用于Select/Radio等)
 * @property {Object} [rules] - 验证规则
 */

/**
 * 分类表单字段配置
 * @type {FormConfig[]}
 */
export const formConfig = [
  {
    field: 'icon',
    label: '分类图标',
    component: 'IconSelect',
    placeholder: '请选择图标',
    rules: [{ required: true, message: '请选择图标', trigger: 'change' }],
    render: (form) => {
      return h(IconSelect, {
        modelValue: form.icon,
        'onUpdate:modelValue': (val) => {
          form.icon = val
        },
        placeholder: '请选择图标',
      })
    },
  },
  {
    field: 'name',
    label: '分类名称',
    component: 'Input',
    placeholder: '请输入分类名称',
    rules: [
      { required: true, message: '请输入分类名称', trigger: 'blur' },
      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
    ],
  },
  {
    field: 'description',
    label: '分类描述',
    component: 'Input',
    placeholder: '请输入分类描述',
    props: {
      type: 'textarea',
      rows: 3,
    },
  },
  {
    field: 'orderNum',
    label: '排序',
    component: 'Input',
    placeholder: '请输入排序号',
    props: {
      type: 'number',
      min: 0,
      class: 'number-input',
    },
    defaultValue: 5,
    rules: [{ required: true, message: '请输入排序号', trigger: 'blur' }],
  },
  {
    field: 'status',
    label: '状态',
    component: 'Radio',
    defaultValue: '1',
    props: {
      value: '1',
    },
    options: [
      { label: '启用', value: '1' },
      { label: '禁用', value: '0' },
    ],
    rules: [{ required: true, message: '请选择状态', trigger: 'change' }],
  },
]

/**
 * 获取表单默认值
 * @returns {Object} 默认值对象
 */
export const getDefaultFormData = () => {
  return {
    id: '',
    icon: '',
    name: '',
    description: '',
    orderNum: 5,
    status: '1',
  }
}
